<template>
  <q-page class="bg-grey-2" padding>
    <div class="q-gutter-y-md">
      <q-card flat>
        <q-card-section>
          <div class="text-h6">可用额度</div>
          <div class="flex items-center q-gutter-x-md">
            <div class="text-h5 text-bold text-orange">¥10003.43</div>
            <q-btn color="primary" label="充值" unelevated />
            <q-btn color="grey" label="提现" dense flat />
          </div>
        </q-card-section>
        <q-card-section class="flex items-center">
          <q-toggle
            v-model="data.quotaWarning.state"
            left-label
            label="可用额度预警"
          />
          <span class="text-grey">
            (预警阈值：
            <span class="text-dark">¥1232.44</span>
            <q-btn color="blue" label="修改" dense flat />)
          </span>
        </q-card-section>
      </q-card>

      <q-card flat>
        <q-card-section>
          <div class="text-h6">
            账号有效期：
            {{ data.expiresTime }}
            <span class="text-grey text-body1">({{ data.diffTime }})</span>
          </div>
        </q-card-section>
        <div class="row q-col-gutter-lg q-px-md q-pb-md">
          <template v-for="(item, index) in data.products.list" :key="index">
            <div class="col">
              <q-card
                class="text-center cursor-pointer"
                :class="{ 'products-active': data.products.selected === item }"
                @click="data.products.selected = item"
              >
                <q-card-section>
                  <div class="text-h6">
                    {{ item.title }}
                  </div>
                  <div class="text-subtitle2">
                    {{ item.describe }}
                  </div>
                </q-card-section>
                <q-card-section>
                  <span>¥</span>
                  <span>78</span>
                  <span>/月</span>
                </q-card-section>
                <q-separator />
                <q-item>
                  <q-item-section>
                    <q-item-label
                      >节省{{
                        parseInt(
                          ((item.original_price - item.price) /
                            item.original_price) *
                            100
                        )
                      }}%</q-item-label
                    >
                  </q-item-section>
                </q-item>
                <q-separator />
                <q-item class="products-total">
                  <q-item-section>
                    <q-item-label>总价：¥{{ item.price }}</q-item-label>
                  </q-item-section>
                </q-item>
                <!-- <div class="bg-grey text-white products-total">总价：¥88</div> -->
              </q-card>
            </div>
          </template>
        </div>

        <q-card-section>
          <div class="text-h6">付款方式</div>
        </q-card-section>
        <q-card-section>
          <payment-types v-model="data.payType"></payment-types>
        </q-card-section>

        <q-card-section class="text-center">
          <!-- <q-item-label>
            提交即表示您同意我们的
            <q-btn color="blue" flat dense label="隐私政策" />
            和
            <q-btn color="blue" flat dense label="服务条款" />
          </q-item-label> -->
          <q-btn
            color="primary"
            size="xl"
            :label="'支付 ¥' + data.products.selected.price"
            rounded
            unelevated
            padding="10px 60px"
            v-if="data.products.selected"
          />
        </q-card-section>
      </q-card>
    </div>
  </q-page>
</template>

<script>
import { date } from "quasar";
import { diffTime } from "src/assets/utils";
import { api } from "src/boot/axios";
import PaymentTypes from "src/components/PaymentTypes.vue";
import { computed, defineComponent, reactive } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  components: { PaymentTypes },
  name: "PagesWalletPageVue",
  setup() {
    const $store = useStore();
    const data = reactive({
      quotaWarning: {
        value: 0,
        state: false,
      },
      expiresTime: computed(() =>
        date.formatDate(
          $store.state.persisted.auth.expires_time * 1000,
          "YYYY-MM-DD HH:mm:ss"
        )
      ),
      diffTime: computed(() => {
        const diff = diffTime($store.state.persisted.auth.expires_time);
        if (diff.days) {
          return diff.days + "天";
        }
        if (diff.hours) {
          return diff.hours + "小时";
        }
        if (diff.minutes) {
          return diff.minutes + "分钟";
        }
        if (diff.seconds) {
          return diff.seconds + "秒";
        }
        return "";
      }),
      products: {
        list: [],
        selected: null,
      },
      payType: null,
    });

    api.get("products/index").then((res) => {
      console.log(res);
      data.products.list = res;
      data.products.selected = res[0];
    });
    return { data };
  },
});
</script>

<style lang="scss" scoped>
.products-total {
  background-color: #4f5361;
  color: white;
}
.products-active {
  background-color: #1976d2;
  color: white;
  .products-total {
    background-color: #1976d2 !important;
    color: white;
  }
}
</style>
